<template>
    <div style="position: relative;">
        <Form :model="data" :label-width="100" :rules="ruleValidate" ref="formCreate" style="width:760px;">
            <FormItem label="申报海关" prop="customs">
                <RemoteSelect url="common/select/customs" v-model="data.customs"></RemoteSelect>
            </FormItem>
            <FormItem label="主管海关" prop="port">
                <RemoteSelect url="common/select/customs" v-model="data.port"></RemoteSelect>
            </FormItem>
            <FormItem label="账册编码" prop="ems_no">
                <Input v-model="data.ems_no"></Input>
            </FormItem>
            <FormItem label="账册企业代码" prop="area_code">
                <Input v-model="data.area_code"></Input>
            </FormItem>
            <FormItem label="账册企业名称" prop="area_name">
                <Input v-model="data.area_name"></Input>
            </FormItem>
            <FormItem label="申报企业代码" prop="agent_code">
                <Input v-model="data.agent_code"></Input>
            </FormItem>
            <FormItem label="申报企业名称" prop="agent_name">
                <Input v-model="data.agent_name"></Input>
            </FormItem>
            <FormItem label="申报企业DXP" prop="dxpid">
                <Input v-model="data.dxpid"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
            </FormItem>
        </Form>
        <Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
    import IViewArea from 'iview-area';
    import Vue from 'vue';
    import RemoteSelect from "../../../components/form/remoteSelect";
    import fromSubmit from "../../../mixins/fromSubmit";

    Vue.use(IViewArea);

    export default {
        name: "customs",
        components: {RemoteSelect},
        mixins: [fromSubmit],
        data() {
            return {
                data: {},
                ruleValidate: {
                    customs: [{required: true, message: '申报海关必须选择', len: 4}],
                    port: [{required: true, message: '主管海关必须选择', len: 4}],
                    ems_no: [{required: true, message: '账册编号必须填写', len: 12}],
                    area_code: [{required: true, message: '账册企业代码必须填写', len: 10}],
                    area_name: [{required: true, message: '账册企业名称必须填写'}],
                    agent_code: [{required: true, message: '申报企业代码必须填写', len: 10}],
                    agent_name: [{required: true, message: '申报企业名称必须填写'}],
                    dxpid: [{required: true, message: '申报企业DXP必须填写', len: 16}],
                },
                loading: false
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            getData(){
                this.loading = true;
                this.$http.get(`system/system/customs`).then((res) => {
                    this.data = res;
                }).finally(() => {
                    this.loading = false;
                });
            },
            submit(name) {
                this.validate(name).then(() => {
                    this.loading = true;
                    this.$http.put(`system/system/customs`, this.data).then((res) => {
                        this.getData();
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
